<template>
    <div class="x_body">

        <div class="body_size">

            <div class="x_left">
                <div><img src="images/logo.png" alt=""></div>
                <div>万新医学</div>
            </div>

            <div class="x_right">
                <!-- <ul>
                    <li>认识万新</li>
                    <li>社会责任</li>
                    <li>医学资讯</li>
                    <li>临床招募</li>
                    <li>公益救助</li>
                    <li>加入我们</li>
                </ul> -->



                <el-menu :default-active="this.$router.path" @select="handleSelect" mode="horizontal" :router="true"
                    class="el-menu-demo">
                    <el-menu-item class="el-menu-demo-son" :class="{ elMenuDemoSonBottom: $route.path === '/' }" index="/">认识万新</el-menu-item>
                    <el-menu-item class="el-menu-demo-son" :class="{ elMenuDemoSonBottom: $route.path === '/information' }" index="/information">医学资讯</el-menu-item>
                    <el-menu-item class="el-menu-demo-son" :class="{ elMenuDemoSonBottom: $route.path === '/recruit' }" index="/recruit">临床招募</el-menu-item>
                    <el-menu-item class="el-menu-demo-son" :class="{ elMenuDemoSonBottom: $route.path === '/join' }" index="/join">加入我们</el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'xNav',

    data() {
        return {
            activeIndex: '1',
        };
    },
    props: ['elMenuBottom'],
    mounted() {

        // 监听窗口滚动事件
        window.addEventListener('scroll', function () {
            // 获取垂直滚动偏移量
            const scrollY = window.scrollY || window.pageYOffset;

            // 打印滚动偏移量
            // console.log('垂直滚动偏移量:', scrollY);
            if (scrollY != 0) {
                // console.log("动了动了");
                this.document.querySelector(".x_body").style.backgroundColor = "white"
                this.document.querySelector(".x_body").style.boxShadow = "0 0 5px #666"
            } else {
                this.document.querySelector(".x_body").style.backgroundColor = "transparent"
                this.document.querySelector(".x_body").style.boxShadow = "none"
            }

            // 在这里可以执行你希望基于滚动偏移量执行的操作
        });


        // 获取点击导航对应的路由名称
        // let targetRouteName = this.$route.name;
        // if (targetRouteName == 'home') {
        //     this.activeIndex = 1
        //     this.$emit("bgImg", 1)
        // }
        // if (targetRouteName == 'information') this.activeIndex = 2
        // if (targetRouteName == 'recruit') this.activeIndex = 3
        // if (targetRouteName == 'join') this.activeIndex = 4
    },
    // 监听路由的变化
    // watch: {
    //     $route(newRoute, oldRoute) {
    //         // 当路由变化时，调用子组件的方法
    //         console.log('elMenuBottom', this.elMenuBottom);
    //         // console.log(newRoute, oldRoute);
    //     }
    // },
    methods: {
        handleSelect(key, keyPath) {
            // console.log(key, keyPath);
            // this.$route.push({
            //     name:"home"
            // })
            // console.log(key);

            // 发送事件，key 对应路由名称
            // this.$emit("bgImgSrc", key);
        }
    },
};
</script>

<style scoped>
.x_body {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: auto;
    color: #333333;
    transition: all 0.3s;
}

.body_size {
    width: 75rem;
    height: 3.8rem;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.x_left {
    width: 12.5rem;
    height: 3.75rem;
    display: flex;
    line-height: 3.75rem;
}

.x_left>div:nth-child(1) {
    width: 3.75rem;
    height: 3.75rem;
    margin-top: 0.3125rem;
}

.x_left>div:nth-child(1) img {
    width: 80%;
    height: 80%;
}

.x_left>div:nth-child(2) {
    font-weight: bold;
    font-size: 1.3rem;
}

.x_right {
    width: 25rem;
    height: 3.125rem;
}

.x_right .el-menu-demo {
    /* height: 3.75rem; */
    color: #333333;
    background-color: transparent;
    border: none;
}

.elMenuDemoSonBottom {
    border-bottom: 2px solid #559EFF !important;
}

.x_right .el-menu-demo .el-menu-demo-son:hover {
    background-color: transparent;
}

/* .x_right>ul {
    display: flex;
    justify-content: space-around;
    line-height: 3.125rem;
} */
</style>